
<template>
  <!------------------------------------ 商品规格弹窗内容 ------------------------------------
    @desc 包含商品促销、参数
    @author kyle
    @date 2021-03-05
    @props
      policyList  ———— 促销信息列表（对应PolicyList）
      product     ———— 商品数据（对应ProductInfo）
      optType     ———— 类型
  -->
  <div>
    <div v-show="optType==='sales'" class="option-content">
      <h2 class="lh-114 fs-32 fw-500 tac hb">促销</h2>
      <p v-for="(item,index) in policyList" :key="index" class=" text-show-line-1 fs-28 pt-50 lh-xxs plr-30">
        <span class="color-primary">[{{ item.Name }}] </span>
        <span>{{ item.Remark }}</span>
      </p>
    </div>
    <div v-show="optType==='param'" class="option-content">
      <h2 class="lh-114 fs-32 fw-500 tac hb">参数</h2>
      <p v-for="(item,index) in paramsList" :key="index" class="params-item flex-s-c">
        <span class="color-gray-light item-name text-show-line-2">{{ item.Name }} </span>
        <span class="flex-1 text-show-line-2">{{ item.Value }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductOptionPopup',
  components: {
  },
  props: {
    policyList: { // 促销信息列表
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    product: { // 商品数据
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    optType: { // 类型
      type: String,
      required: false,
      default: 'sales'
    }
  },
  data() {
    return {

    }
  },
  computed: {
    paramsList() {
      const paramsList = []
      if (this.product.ParamerValue) {
        const _list = this.product.ParamerValue.split(';')
        if (_list.length > 0) {
          _list.forEach(item => {
            const _obj = {}
            if (item && item.indexOf('_') !== -1) {
              _obj.Name = item.split('_')[0]
              _obj.Value = item.split('_')[1]
              paramsList.push(_obj)
            }
          })
        }
      }
      return paramsList
    }
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
// 促销、参数、规格
.option-content{
  background: $colorF;
  border-radius: 40px 40px 0 0;
  max-height: 70%;
  padding-bottom: 120px;
  .params-item{
    height: 100px;
    margin: 0 30px;
    border-bottom: 1px solid $colorBorder;
    font-size: 28px;
    &:last-child{
      border-bottom: none;
    }
    .item-name{
      width: 170px;
      padding-right: 30px;
    }
  }
}
</style>
